<template>
  <view class="page-container">
    <!-- 顶部机构信息卡片 -->
    <view class="org-header-card">
      <image class="org-image" src='../../static/station.jpg' mode="aspectFill"></image>
      <view class="org-info">
        <text class="org-name">{{ orgInfo.orgName }}</text>
        <view class="org-address-line">
          <uni-icons type="location-filled" size="16" color="#007aff"></uni-icons>
          <text class="org-address">{{ orgInfo.orgAddress }}</text>
          <uni-icons type="right" size="14" color="#bbb" style="margin-left: auto;"></uni-icons>
        </view>
        <view class="org-contact-line">
          <view class="contact-icon-wrapper">
            <uni-icons type="phone-filled" size="18" color="#007aff"></uni-icons>
          </view>
          <view class="contact-icon-wrapper">
            <uni-icons type="chat-filled" size="18" color="#28a745"></uni-icons>
          </view>
        </view>
      </view>
    </view>

    <!-- 主要内容区域 -->
    <view class="main-content">
      <!-- 机构简介 -->
      <view class="section-card">
        <view class="section-title">机构简介</view>
        <text class="section-text">{{ orgInfo.orgIntroduction }}</text>
      </view>

      <!-- 医生团队 -->
      <view class="section-card">
        <view class="section-title">医生团队</view>
        <view class="team-list">
          <view v-for="team in doctorTeams" :key="team.id" class="list-item" hover-class="list-item-hover"  @click="selectTeam(team)">
            <image class="item-image" :src="team.imageUrl" mode="aspectFill"></image>
            <view class="item-info">
              <text class="item-title">{{ team.name }}</text>
              <view class="item-subtitle-line">
                <text class="item-subtitle">{{ team.org }}</text>
                <text class="item-distance">距离{{ team.distance }}</text>
              </view>
              <view class="item-tags">
                <uni-icons type="star-filled" size="14" color="#f39c12"></uni-icons>
              </view>
            </view>
            <uni-icons type="right" size="16" color="#bbb" style="margin-left: auto;"></uni-icons>
          </view>
        </view>
      </view>

      <!-- 服务包 -->
      <view class="section-card">
        <view class="section-title">服务包</view>
        <view class="package-list">
          <view v-for="pkg in servicePackages" :key="pkg.id" class="list-item" hover-class="list-item-hover">
            <image class="item-image" :src="pkg.imageUrl" mode="aspectFill"></image>
            <view class="item-info">
              <text class="item-title">{{ pkg.name }}</text>
              <view class="item-tags">
                <text class="tag">{{ pkg.tag }}</text>
              </view>
            </view>
            <view class="item-price">
              <text class="price-symbol">¥ </text>
              <text class="price-value">{{ pkg.price }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import UniIcons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
import {queryById} from "../../api/organization";

export default {
  name: "orgDetail",
  components: {UniIcons},
  data() {
    return {
      // 机构信息 (模拟数据)
      orgInfo: {
        id: 1,
        orgName: '北京市怀柔区洛西社区卫生服务站',
        orgAddress: '怀柔区洛西县建设路990号',
        imageUrl: 'https://img.js.design/assets/img/66384a51d399614433d7b901.png',
        introduction: '始建于1994年10月，是清新地区唯一一所集医疗、教学、科研、保健为一体的国家二级甲等非营利性综合医疗机构，承担着本区群众的医疗救治、预防保健和康复、健康教育、医学科研教学等工作任务，先后荣获清新区“创建国家慢性病综合防控示范区先进单位”。'
      },
      // 医生团队列表 (模拟数据)
      doctorTeams: [{
        id: 1,
        name: '王天戈团队',
        org: '翡翠郡社区服务站',
        distance: '4.9km',
        imageUrl: '../../static/doctor-team/doctor-team.jpg'
      }],
      // 服务包列表 (模拟数据)
      servicePackages: [{
        id: 1,
        name: '老年人服务包',
        tag: '基础医疗',
        price: '0',
        imageUrl: '../../static/pak2.jpg'
      }]
    };
  },
  onLoad(options) {
    // 真实的业务场景中，你应该在这里通过 options.id 从服务器获取机构的详细数据
    console.log("接收到的机构ID:", options.id);
    this.fetchOrgData(options.id);
  },
  methods: {
    async fetchOrgData(id) {
      let {data:data} = await queryById(id)
      this.orgInfo = data.data;
      console.log("已从服务器加载机构数据:", data);
    },
    selectTeam(team) {
      console.log("已选择医生团队:", team);
      uni.navigateTo({
        url: `/pages/sign/team-detail?id=${team.id}`
      });
    }
  }
}
</script>

<style scoped>
.page-container {
  background-color: #f5f8ff;
  min-height: 100vh;
}

.org-header-card {
  background-color: #ffffff;
  padding: 30rpx;
  display: flex;
  gap: 24rpx;
  align-items: flex-start;
}

.org-image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 16rpx;
  flex-shrink: 0;
}

.org-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.org-name {
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
  line-height: 1.4;
}

.org-address-line {
  display: flex;
  align-items: center;
  margin-top: 10rpx;
}

.org-address {
  font-size: 26rpx;
  color: #888;
  margin-left: 8rpx;
}

.org-contact-line {
  display: flex;
  gap: 20rpx;
  margin-top: 20rpx;
}

.contact-icon-wrapper {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background-color: #f0f5ff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-content {
  padding: 24rpx;
}

.section-card {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 24rpx;
}

.section-text {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}

/* 列表项通用样式 */
.list-item {
  display: flex;
  align-items: center;
  gap: 24rpx;
  padding: 20rpx 0;
}

.team-list .list-item:not(:last-child), .package-list .list-item:not(:last-child) {
  border-bottom: 1rpx solid #f0f0f0;
}

.list-item-hover {
  background-color: #f9f9f9;
}

.item-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 12rpx;
  flex-shrink: 0;
}

.item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.item-title {
  font-size: 30rpx;
  font-weight: 500;
  color: #333;
}

.item-subtitle-line {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.item-subtitle, .item-distance {
  font-size: 24rpx;
  color: #888;
}

.item-tags {
  display: flex;
  align-items: center;
}

.tag {
  background-color: #e0f0ff;
  color: #007aff;
  font-size: 22rpx;
  padding: 4rpx 12rpx;
  border-radius: 6rpx;
}

.item-price {
  font-weight: bold;
}

.price-symbol {
  font-size: 24rpx;
  color: #fa5151;
}

.price-value {
  font-size: 34rpx;
  color: #fa5151;
}
</style>
